<template>
  <div>child1组件</div>
  <div>count: {{ count }} - <button @click="fn">btn</button></div>
  <div>doubleCount: {{ doubleCount }}</div>
  <div>name: {{ name }}</div>
  <div>list: {{ list }}</div>
</template>

<script lang="ts">
import { useCounterStore } from "../stores/counter";
import { mapWritableState, mapGetters, mapActions } from "pinia";

export default {
  computed: {
    // ...mapState(useCounterStore, ["count"]),
    ...mapWritableState(useCounterStore, ["count", "name", "list"]),
    ...mapGetters(useCounterStore, ["doubleCount"]),
  },
  methods: {
    fn() {
      // pinia的值可以在组件里面修改
      this.count++;

      // 也可以通过actions的函数去进行修改
      // this.increment();
    },
    ...mapActions(useCounterStore, ["increment"]),
  },
};
</script>
